<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { post, get } from "@/libs/request";
import { useDialogCase } from "@/libs/dialog";
import NoData from "@/views/other/noData.vue";
import { ElMessage } from "element-plus";
import paginationCase from "@/components/paginationCase.vue";
import { debounce } from "@/libs/util";
const tableData = ref([]);
const pageData = ref({
  pageIndex: 1,
  pageSize: 30,
  total: 0,
});
const params = ref<{
  goodsName: String;
  catId: number;
}>({
  goodsName: "",
  catId: 0,
});
const catId = ref([]);
//分类列表
const goodsCategory = ref([]);
//加载分页数据
const getPaginateDate = async (reload = true) => {
  const res = await post(
    "goods/paginate",
    {
      ...params.value
    },
    {
      pageIndex: reload ? 1 : pageData.value.pageIndex,
      pageSize: pageData.value.pageSize,
    }
  );
  if (res.errCode == 0) {
    pageData.value = res.page;
    tableData.value = res.data;
  }
};
//修改排序
const handleChangeSort = async (row: any) => {
  const res = await post("goods/editSort", {
    goodsId: row.goodsId,
    sort: row.sort,
  });
  if (res.errCode == 0) {
    ElMessage.success(res.errMsg);
    getPaginateDate();
  } else {
    ElMessage.error(res.errMsg);
  }
};
/**
 * 修改热门状态
 */
const handleChangeHot = async (row: any) => {
  const res = await get(`goods/editHot/${row.goodsId}`);
  if (res.errCode == 0) {
    ElMessage.success(res.errMsg);
    getPaginateDate();
  } else {
    ElMessage.error(res.errMsg);
  }
};
/**
 * 修改新品状态
 */
const handleChangeNew = async (row: any) => {
  const res = await get(`goods/editNew/${row.goodsId}`);
  if (res.errCode == 0) {
    ElMessage.success(res.errMsg);
    getPaginateDate();
  } else {
    ElMessage.error(res.errMsg);
  }
};
//修改显示状态
const handleChangeShow = async (row: any) => {
  const res = await get(`goods/editShow/${row.goodsId}`);
  if (res.errCode == 0) {
    ElMessage.success(res.errMsg);
    getPaginateDate();
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 点击查看详情
const detailRow = async (row: any) => { 
  const dialog = useDialogCase();
  dialog.show({
    path: "goods/detail",
    params: {
      goodsId: row.goodsId,
    },
    callback: () => {
      getPaginateDate();
    },
  });
};
//点击删除
const deleteRow = async (row: any) => {
  const res = await get(`goods/delete/${row.goodsId}`);
  if (res.errCode == 0) {
    ElMessage.success(res.errMsg);
    getPaginateDate();
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 点击添加
const addRow = () => {
  const dialog = useDialogCase();
  dialog.show({
    path: "goods/add",
    callback: () => {
      getPaginateDate();
    },
  });
};
//点击编辑
const editRow = (row: any) => {
  const dialog = useDialogCase();
  dialog.show({
    path: "goods/edit",
    params: {
      goodsId: row.goodsId,
    },
    callback: () => {
      getPaginateDate();
    },
  });
};
/**
 * 搜索分类
 */
const handleChangeCatId = () => {
  if (!catId.value) {
    params.value.catId = 0;
  } else {
    params.value.catId = Number(catId.value[catId.value.length - 1]);
  }
}
/**
 * 获取商品分类
 */
const getGoodsCategory = async () => {
  const res = await get("goodsCategory/getTree");
  if (res.errCode == 0) {
    goodsCategory.value = res.data;
  }
}
watch(
  params.value,
  () => {
    debounce(() => {
      pageData.pageIndex = 1;
      getPaginateDate();
    });
  }
);
onMounted(() => {
  getGoodsCategory();
  getPaginateDate();
});
</script>
<template>
  <div class="page">
    <div class="title">商品列表</div>
    <div class="toolbar">
      <div class="query">
        <el-cascader :options="goodsCategory" v-model="catId" :props="{
          label: 'catName',
          value: 'catId'
        }" @change="handleChangeCatId" clearable />
      </div>
      <div class="query">
        <el-input v-model="params.goodsName" placeholder="请输入商品名称" clearable />
      </div>
      <el-button type="primary" @click="addRow()" class="float-right">新增商品</el-button>
    </div>
    <div class="main">
      <el-table :data="tableData" style="width: 100%" border>
        <template #empty>
          <NoData />
        </template>
        <el-table-column label="排序" align="center" width="80">
          <template #default="scope">
            <el-input-number :controls="false" size="small" v-model="scope.row.sort" :min="0" :max="999"
              @change="handleChangeSort(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="封面图" align="center" width="100">
          <template #default="scope">
            <el-image :src="scope.row.goodsCover" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column label="是否热门" width="80">
          <template #default="scope">
            <el-switch v-model="scope.row.isHot" :active-value="true" :inactive-value="false"
              @change="handleChangeHot(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="是否新品" width="80">
          <template #default="scope">
            <el-switch v-model="scope.row.isNew" :active-value="true" :inactive-value="false"
              @change="handleChangeNew(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template #default="scope">
            <el-switch v-model="scope.row.isShow" :active-value="true" :inactive-value="false"
              @change="handleChangeShow(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button v-if="scope.row.isShow" type="primary" size="small"
              @click="detailRow(scope.row)">查看</el-button>
            <el-button v-else type="primary" size="small" @click="editRow(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" :disabled="scope.row.isShow"
              @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paginationCase v-model="pageData" @update:modelValue="getPaginateDate(false)" />
    </div>
  </div>
</template>
